// components/yeyouzi-cropper/yeyouzi-cropper.js
let success;
let fail;
let imsg;
let app = getApp()
let yuming = app.globalData.yuming
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    canvas: '',
    ctx: '',
    dpr: '',
    x1: 0,
    y1: 0,
    x2: 0,
    y2: 0,
    k1: 0,
    m1: 0,
    k2: 0,
    m2: 0,
    cutMove: false,
    endCut: {
      x: 0,
      y: 0
    },
    movePoint: '0',
    img: {
      path: '',
      width: 0,
      height: 0,
      type: 1 // 1:横向 2:纵向
    },
    imageWidth: 0,
    imageHeight: 0,
    imageLeft: 0,
    imageTop: 0,
    imgRotate: 0,
    imgMirror: 0,
    originWidthShow: 0.5,
    originHeightShow: 0.5,
    imgMove: false,
    imgStart: {
      x: 0,
      y: 0,
      left: 0,
      top: 0,
      distance: 0,
      width: 0,
      height: 0,
      cutImg: ''
    },
    imgScale: false,

    cutImg: {
      path: '',
      x: 0,
      y: 0,
      width: 0,
      height: 0
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 公有方法
     */
  // 列表
  liebiao() {
    var that = this
    wx.request({
      url: yuming + 'shop/shopSelectBossCircle',
      method: 'POST',
      header: {
        'Content-Type': 'application/x-www-form-urlencoded',
        token: wx.getStorageSync('token')
      },
      data: {
        shopId: wx.getStorageSync('shopId'),
        category: 1
      },
      success: function (res) {
        wx.hideLoading({})
        that.setData({
          xiao: res.data.data,
          avatar: res.data.user.avatar,
          nickname: res.data.user.nickname,
          shop: res.data.shop,
          shopfollow: res.data.shopfollow,
          shopBosscircle: res.data.shopBosscircle,
          shopCoverfollow: res.data.shopCoverfollow,
          bossBackg: res.data.shop.bossBackg
          // shopBosscircle  动态 shopfollow  关注   shopCoverfollow  粉丝
        })
      },
      fail: function () {
        app.consoleLog("请求数据失败");
      }
    })
  },
    //初始化
    init(param) {
      console.log(param)
      wx.setStorageSync('ima', param.imgPath)
      console.log(wx.getStorageSync('ima'))
      success = param.success
      fail = param.fail
      var that = this;
      this.setData({
        img: {
          path: param.imgPath
        }
      })
      const query = wx.createSelectorQuery().in(this)
      query.select('#cutCanvas')
        .fields({
          node: true,
          size: true
        })
        .exec((res) => {
          const canvas = res[0].node
          const ctx = canvas.getContext('2d')
          const dpr = wx.getSystemInfoSync().pixelRatio
          canvas.width = res[0].width * dpr
          canvas.height = res[0].height * dpr
          ctx.scale(dpr, dpr)

          var x1 = canvas.width * 0.15 / dpr;
          var y1 = (canvas.height - canvas.width * 0.7) / 2 / dpr;
          var x2 = x1 + canvas.width * 0.7 / dpr;
          var y2 = y1 + canvas.width * 0.7 / dpr;
          var k1 = (y2 - y1) / (x2 - x1);
          var m1 = (x2 * y1 - x1 * y2) / (x2 - x1)
          var k2 = (y1 - y2) / (x2 - x1);
          var m2 = (x2 * y2 - x1 * y1) / (x2 - x1);
          that.setData({
            canvas: canvas,
            ctx: ctx,
            dpr: dpr,
            x1: x1,
            y1: y1,
            x2: x2,
            y2: y2,
            k1: k1,
            m1: m1,
            k2: k2,
            m2: m2
          })
          this._drawCut(x1, y1, x2, y2)
          wx.getImageInfo({
            src: param.imgPath,
            success(img) {
              var width = '';
              var height = '';
              var type = 0;
              var x = '';
              var y = '';
              var d = '';
              if (img.width > img.height) {
                height = that.data.y2 - that.data.y1;
                width = (img.width * height) / img.height
                type = 1
                d = img.height
                x = (img.width - d) / 2
                y = 0
              } else {
                width = that.data.x2 - that.data.x1;
                height = (img.height * width) / img.width
                type = 2
                d = img.width
                x = 0
                y = (img.height - d) / 2
              }
              that.setData({
                img: {
                  path: param.imgPath,
                  width: img.width,
                  height: img.height,
                  type: type
                },
                cutImg: {
                  x: x,
                  y: y,
                  width: d,
                  height: d
                },
                imageWidth: ((x2 - x1) / d) * img.width,
                imageHeight: ((y2 - y1) / d) * img.height,
                imageLeft: x1 - ((x2 - x1) / d) * x,
                imageTop: y1 - ((y2 - y1) / d) * y,
                imgRotate: 0
              })
            }
          })
        })

    },

    /**
     * 私有方法
     */
    _drawCut(x1, y1, x2, y2) {
      var ctx = this.data.ctx;
      var canvas = this.data.canvas;
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      ctx.globalAlpha = '0.5'
      ctx.fillStyle = '#000000'
      ctx.fillRect(0, 0, canvas.width, canvas.height)

      ctx.strokeStyle = '#ffffff'
      ctx.lineWidth = '3'
      ctx.lineCap = 'square'
      ctx.globalAlpha = '1'
      ctx.strokeRect(x1, y1, x2 - x1, y2 - y1)
      ctx.fillStyle = '#ffffff'
      ctx.fillRect(x1 - 5, y1 - 5, 20, 20) //左上角 1
      ctx.fillRect(x2 - 15, y1 - 5, 20, 20) //右上角 2
      ctx.fillRect(x1 - 5, y2 - 15, 20, 20) //左下角 3
      ctx.fillRect(x2 - 15, y2 - 15, 20, 20) //右下角 4
      ctx.clearRect(x1, y1, x2 - x1, y2 - y1)
    },

    _touchStart(e) {
      //裁剪框是否移动
      var flag = false;
      var point = '0'
      if (e.touches[0].x >= this.data.x1 - 10 && this.data.x1 + 10 >= e.touches[0].x) {
        if (e.touches[0].y >= this.data.y1 - 10 && this.data.y1 + 10 >= e.touches[0].y) {
          flag = true;
          point = '1';
          this.setData({
            endCut: {
              x: this.data.x1,
              y: this.data.y1
            }
          })
        } else if (e.touches[0].y >= this.data.y2 - 10 && this.data.y2 + 10 >= e.touches[0].y) {
          flag = true;
          point = '3';
          this.setData({
            endCut: {
              x: this.data.x1,
              y: this.data.y2
            }
          })
        }
      } else if (e.touches[0].x >= this.data.x2 - 10 && this.data.x2 + 10 >= e.touches[0].x) {
        if (e.touches[0].y >= this.data.y1 - 10 && this.data.y1 + 10 >= e.touches[0].y) {
          flag = true;
          point = '2'
          this.setData({
            endCut: {
              x: this.data.x2,
              y: this.data.y1
            }
          })
        } else if (e.touches[0].y >= this.data.y2 - 10 && this.data.y2 + 10 >= e.touches[0].y) {
          flag = true;
          point = '4'
          this.setData({
            endCut: {
              x: this.data.x2,
              y: this.data.y2
            }
          })
        }
      }
      this.setData({
        cutMove: flag,
        movePoint: point
      })

      //图片是否移动
      if (e.touches[0].x >= this.data.x1 + 10 && this.data.x2 - 10 >= e.touches[0].x) {
        if (e.touches[0].y >= this.data.y1 + 10 && this.data.y2 - 10 >= e.touches[0].y) {
          if (e.touches.length == 1) {
            this.setData({
              imgMove: true,
              imgStart: {
                x: e.touches[0].x,
                y: e.touches[0].y,
                left: this.data.imageLeft,
                top: this.data.imageTop
              },
              imgScale: false
            })
          } else if (e.touches.length == 2) {
            this.setData({
              imgMove: false,
              imgStart: {
                distance: Math.sqrt(Math.pow(e.touches[1].x - e.touches[0].x, 2) + Math.pow(e.touches[1].y - e.touches[0].y, 2)),
                width: this.data.imageWidth,
                height: this.data.imageHeight,
                cutImg: this.data.cutImg
              },
              imgScale: true
            })
          }
        }
      }
    },

    _touchMove(e) {
      if (this.data.cutMove) {
        var x1;
        var y1;
        var x2;
        var y2;
        if (this.data.movePoint == '1') {
          x1 = e.touches[0].x
          y1 = this.data.k1 * x1 + this.data.m1
          x2 = this.data.x2
          y2 = this.data.y2
          if (x1 > x2 - 100) {
            x1 = x2 - 100
            y1 = this.data.k1 * x1 + this.data.m1
          } else if (x1 < this.data.x1) {
            x1 = this.data.x1
            y1 = this.data.k1 * x1 + this.data.m1
          }
          this.setData({
            endCut: {
              x: x1,
              y: y1
            }
          })
        } else if (this.data.movePoint == '2') {
          x2 = e.touches[0].x
          y1 = this.data.k2 * x2 + this.data.m2
          x1 = this.data.x1
          y2 = this.data.y2
          if (x2 > this.data.x2) {
            x2 = this.data.x2
            y1 = this.data.y1
          } else if (x2 < this.data.x1 + 100) {
            x2 = this.data.x1 + 100
            y1 = this.data.k2 * x2 + this.data.m2
          }
          this.setData({
            endCut: {
              x: x2,
              y: y1
            }
          })
        } else if (this.data.movePoint == '3') {
          x1 = e.touches[0].x
          y2 = this.data.k2 * x1 + this.data.m2
          x2 = this.data.x2
          y1 = this.data.y1
          if (x1 > x2 - 100) {
            x1 = x2 - 100
            y2 = this.data.k2 * x1 + this.data.m2
          } else if (x1 < this.data.x1) {
            x1 = this.data.x1
            y2 = this.data.y2
          }
          this.setData({
            endCut: {
              x: x1,
              y: y2
            }
          })
        } else if (this.data.movePoint == '4') {
          x2 = e.touches[0].x
          y2 = this.data.k1 * x2 + this.data.m1
          x1 = this.data.x1
          y1 = this.data.y1
          if (x2 > this.data.x2) {
            x2 = this.data.x2
            y2 = this.data.k1 * x2 + this.data.m1
          } else if (x2 < x1 + 100) {
            x2 = x1 + 100
            y2 = this.data.k1 * x2 + this.data.m1
          }
          this.setData({
            endCut: {
              x: x2,
              y: y2
            }
          })
        }
        this._drawCut(x1, y1, x2, y2)
      } else if (this.data.imgMove) {
        var dx = this.data.imgStart.x - e.touches[0].x
        var dy = this.data.imgStart.y - e.touches[0].y
        var rotate = this.data.imgRotate
        var left = this.data.imgStart.left - dx
        var top = this.data.imgStart.top - dy
        if (this.data.imgMirror == 180) {
          dx = -dx
          rotate = -rotate
        }
        var tx = dx * Math.cos(rotate * Math.PI / 180) + dy * Math.sin(rotate * Math.PI / 180)
        var ty = dy * Math.cos(rotate * Math.PI / 180) - dx * Math.sin(rotate * Math.PI / 180)
        var x = (tx + this.data.originWidthShow * this.data.imageWidth) / this.data.imageWidth * this.data.img.width - this.data.cutImg.width / 2
        var y = (ty + this.data.originHeightShow * this.data.imageHeight) / this.data.imageHeight * this.data.img.height - this.data.cutImg.height / 2
        this.setData({
          cutImg: {
            width: this.data.cutImg.width,
            height: this.data.cutImg.height,
            x: x,
            y: y
          },
          imageLeft: left,
          imageTop: top,
        })
      } else if (this.data.imgScale) {
        var nowDistance = Math.sqrt(Math.pow(e.touches[1].x - e.touches[0].x, 2) + Math.pow(e.touches[1].y - e.touches[0].y, 2))
        var m = nowDistance / this.data.imgStart.distance
        var width = this.data.imgStart.width * m
        var height = this.data.imgStart.height * m
        if (this.data.img.type == 1) {
          height = height < this.data.y2 - this.data.y1 ? this.data.y2 - this.data.y1 : height
          height = height > (this.data.y2 - this.data.y1) * 10 ? (this.data.y2 - this.data.y1) * 10 : height
          width = (height * this.data.img.width) / this.data.img.height
        } else {
          width = width < this.data.x2 - this.data.x1 ? this.data.x2 - this.data.x1 : width
          width = width > (this.data.x2 - this.data.x1) * 10 ? (this.data.x2 - this.data.x1) * 10 : width
          height = (width * this.data.img.height) / this.data.img.width
        }
        var n = width / this.data.imgStart.width
        var cut = {
          x: this.data.imgStart.cutImg.x + ((n - 1) / (2 * n)) * this.data.imgStart.cutImg.width,
          y: this.data.imgStart.cutImg.y + ((n - 1) / (2 * n)) * this.data.imgStart.cutImg.height,
          width: this.data.imgStart.cutImg.width / n,
          height: this.data.imgStart.cutImg.height / n
        }
        var left = this.data.x1 - ((this.data.x2 - this.data.x1) / cut.width) * cut.x
        left = left > this.data.x1 ? this.data.x1 : left
        left = left < this.data.x2 - this.data.imageWidth ? this.data.x2 - this.data.imageWidth : left
        var top = this.data.y1 - ((this.data.y2 - this.data.y1) / cut.height) * cut.y
        top = top > this.data.y1 ? this.data.y1 : top
        top = top < this.data.y2 - this.data.imageHeight ? this.data.y2 - this.data.imageHeight : top
        this.setData({
          imageLeft: left,
          imageTop: top,
          imageWidth: width,
          imageHeight: height,
          cutImg: {
            x: cut.x,
            y: cut.y,
            width: cut.width,
            height: cut.height
          },
        })
      }
    },

    _touchEnd(e) {
      if (this.data.cutMove) {
        var dx;
        var dy;
        var d;
        var movePoint = this.data.movePoint
        if (movePoint % 2 == 0) {
          d = ((this.data.endCut.x - this.data.x1) * this.data.cutImg.width) / (this.data.x2 - this.data.x1)
          if (this.data.imgMirror == 180) {
            dx = -(this.data.endCut.x - this.data.x2) / this.data.imageWidth * this.data.img.width / 2
            if (movePoint == '2') {
              dy = (this.data.endCut.y - this.data.y1) / this.data.imageHeight * this.data.img.height / 2
            } else {
              dy = (this.data.endCut.y - this.data.y2) / this.data.imageHeight * this.data.img.height / 2
            }
          } else {
            dx = (this.data.endCut.x - this.data.x2) / this.data.imageWidth * this.data.img.width / 2
            if (movePoint == '2') {
              dy = (this.data.endCut.y - this.data.y1) / this.data.imageHeight * this.data.img.height / 2
            } else {
              dy = (this.data.endCut.y - this.data.y2) / this.data.imageHeight * this.data.img.height / 2
            }
          }
        } else {
          d = ((this.data.x2 - this.data.endCut.x) * this.data.cutImg.width) / (this.data.x2 - this.data.x1)
          if (this.data.imgMirror == 180) {
            dx = -(this.data.endCut.x - this.data.x1) / this.data.imageWidth * this.data.img.width / 2
            if (movePoint == '1') {
              dy = (this.data.endCut.y - this.data.y1) / this.data.imageHeight * this.data.img.height / 2
            } else {
              dy = (this.data.endCut.y - this.data.y2) / this.data.imageHeight * this.data.img.height / 2
            }
          } else {
            dx = (this.data.endCut.x - this.data.x1) / this.data.imageWidth * this.data.img.width / 2
            if (movePoint == '1') {
              dy = (this.data.endCut.y - this.data.y1) / this.data.imageHeight * this.data.img.height / 2
            } else {
              dy = (this.data.endCut.y - this.data.y2) / this.data.imageHeight * this.data.img.height / 2
            }
          }
        }
        var rotate = this.data.imgMirror == 180 ? -this.data.imgRotate : this.data.imgRotate
        var x = ((dx * Math.cos(rotate * Math.PI / 180) + dy * Math.sin(rotate * Math.PI / 180)) + this.data.originWidthShow * this.data.img.width) - d / 2
        var y = ((dy * Math.cos(rotate * Math.PI / 180) - dx * Math.sin(rotate * Math.PI / 180)) + this.data.originHeightShow * this.data.img.height) - d / 2
        this.setData({
          cutImg: {
            x: x,
            y: y,
            width: d,
            height: d
          },
          imageWidth: ((this.data.x2 - this.data.x1) / d) * this.data.img.width,
          imageHeight: ((this.data.y2 - this.data.y1) / d) * this.data.img.height,
          imageLeft: this.data.x1 - ((this.data.x2 - this.data.x1) / d) * x,
          imageTop: this.data.y1 - ((this.data.y2 - this.data.y1) / d) * y,

        })
        this._drawCut(this.data.x1, this.data.y1, this.data.x2, this.data.y2)
      }
      if (this.data.imgMove) {
        var left = this.data.x1 - ((this.data.x2 - this.data.x1) / this.data.cutImg.width) * this.data.cutImg.x
        var top = this.data.y1 - ((this.data.y2 - this.data.y1) / this.data.cutImg.height) * this.data.cutImg.y
        this.setData({
          imageLeft: left,
          imageTop: top,
        })
      }
      this.setData({
        originWidthShow: (this.data.cutImg.x + this.data.cutImg.width / 2) / this.data.img.width,
        originHeightShow: (this.data.cutImg.y + this.data.cutImg.height / 2) / this.data.img.height,
        cutMove: false,
        movePoint: '0',
        imgMove: false,
        imgScale: false
      })
    },

    _rotateChange(e) {
      this.setData({
        imgRotate: e.detail.value
      })
    },

    _rotateNinety() {
      var r = this.data.imgRotate + 90 > 180 ? this.data.imgRotate - 270 : this.data.imgRotate + 90
      this.setData({
        imgRotate: r
      })
    },

    _imageMirror() {
      var m = this.data.imgMirror == 180 ? 0 : 180
      this.setData({
        imgMirror: m,
      })
    },

    _imgRestore() {
      this.setData({
        canvas: '',
        ctx: '',
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 0,
        k1: 0,
        m1: 0,
        k2: 0,
        m2: 0,
        cutMove: false,
        endCut: {
          x: 0,
          y: 0
        },
        movePoint: '0',
        imageWidth: 0,
        imageHeight: 0,
        imageLeft: 0,
        imageTop: 0,
        imgRotate: 0,
        imgMirror: 0,
        originWidthShow: 0.5,
        originHeightShow: 0.5,
        imgMove: false,
        imgStart: {
          x: 0,
          y: 0,
          left: 0,
          top: 0,
          distance: 0,
          width: 0,
          height: 0,
          cutx: 0,
          cuty: 0
        },
        imgScale: false,

        cutImg: {
          path: '',
          x: 0,
          y: 0,
          width: 0,
          height: 0
        }
      })
      // this.init(this.data.img.path)
      // var that = this
      // that.init({
      //   imgPath: wx.getStorageSync('ima'),
      //   success(res) {
      //     console.log(res) //res即裁剪成功后的图片临时路径
      //     wx.uploadFile({
      //       url: yuming + 'Besall/Upload',
      //       filePath: res,
      //       name: 'file',
      //       formData: {

      //       },
      //       success(res) {
      //         var datas = JSON.parse(res.data)
      //         var urlsa = datas.httpUrl + datas.imgUrl
      //         that.setData({
      //           bossBackg: datas.imgUrl
      //         });
      //         wx.request({
      //           url: yuming + 'shop/shopSaveBossBg',
      //           method: 'POST',
      //           header: {
      //             'Content-Type': 'application/x-www-form-urlencoded',
      //             token: wx.getStorageSync('token')
      //           },
      //           data: {
      //             shopId: wx.getStorageSync('shopId'),
      //             bossBackg: that.data.bossBackg
      //           },
      //           success: function (res) {
      //             wx.showToast({
      //               title: res.data.msg,
      //               icon: 'none'
      //             })
      //             that.liebiao()
      //             // setTimeout(function(){
      //             //   wx.navigateTo({
      //             //     url: '/view/index/bossquan/bossquan',
      //             //   })
      //             // },100)
      //           },
      //           fail: function () {
      //             app.consoleLog("请求数据失败");
      //           }
      //         })
      //       }
      //     });
      //   },
      //   fail(error) {
      //     console.log(error) //有两种:cancel代表点击了叉，fail代表wx.canvasToTempFilePath生成图片失败
      //   }
      // });
    },

    _cancelCut() {
      this._restoreData()
      if (fail) {
        fail('cancel')
      }
    },

    _confirmCut() {
      wx.showLoading({
        title: '裁剪中...',
        mask: true
      })
      var that = this
      const query = wx.createSelectorQuery().in(this)
      query.select('#imgCanvas')
        .fields({
          node: true,
          size: true
        })
        .exec((res) => {
          const canvas = res[0].node
          const ctx = canvas.getContext('2d')
          canvas.width = that.data.cutImg.width
          canvas.height = that.data.cutImg.height
          ctx.translate(canvas.width / 2, canvas.height / 2)
          ctx.rotate((that.data.imgRotate >= 0 ? that.data.imgRotate : that.data.imgRotate + 360) * Math.PI / 180)
          if (that.data.imgMirror == 180) {
            ctx.scale(-1, 1); //左右镜像翻转
          }
          const img = canvas.createImage()
          img.src = that.data.img.path
          img.onload = () => {
            ctx.drawImage(img, 0, 0, that.data.img.width, that.data.img.height, -(that.data.cutImg.x + canvas.width / 2), -(that.data.cutImg.y + canvas.height / 2), that.data.img.width, that.data.img.height)

            wx.canvasToTempFilePath({
              canvas: canvas,
              success(img) {
                success(img.tempFilePath)
                that._restoreData()
                wx.hideLoading({
                  success: (res) => {},
                })
              },
              fail() {
                wx.hideLoading({
                  success: (res) => {
                    wx.showToast({
                      title: '裁剪失败',
                      icon: 'error'
                    })
                    if (fail) {
                      fail('fail')
                    }
                  },
                })
              }
            })

          }
        })

    },

    _restoreData() {
      this.setData({
        canvas: '',
        ctx: '',
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 0,
        k1: 0,
        m1: 0,
        k2: 0,
        m2: 0,
        cutMove: false,
        endCut: {
          x: 0,
          y: 0
        },
        movePoint: '0',
        img: {
          path: '',
          width: 0,
          height: 0,
          type: 1 // 1:横向 2:纵向
        },
        imageWidth: 0,
        imageHeight: 0,
        imageLeft: 0,
        imageTop: 0,
        imgRotate: 0,
        imgMirror: 0,
        originWidthShow: 0.5,
        originHeightShow: 0.5,
        imgMove: false,
        imgStart: {
          x: 0,
          y: 0,
          left: 0,
          top: 0,
          distance: 0,
          width: 0,
          height: 0,
          cutx: 0,
          cuty: 0
        },
        imgScale: false,

        cutImg: {
          path: '',
          x: 0,
          y: 0,
          width: 0,
          height: 0
        }
      })
    },
  }
})